<template>
  <div>
    <div class="alert" v-if="dialogTableVisible"></div>
    <div class="loginCon" v-if="dialogTableVisible">
      <div class="closeCss">
        <el-icon>
          <Close class="closeCssOne" @click="cancel" />
        </el-icon>
      </div>
      <el-form size="large">
        <div>
          <div class="px-5">
            <div class="login-title formCon">绑定手机号</div>
            <el-form-item>
              <el-input placeholder="请输入手机号" v-model="submitData.mobile"/>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入验证码" v-model="submitData.code">
                <template #append>
                  <el-button type="text" @click="getCode('102')" :disabled="sms.disabled">{{ sms.disabled ? sms.count + 'S' : '获取验证码' }}</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="bindingFun" :loading="bindingLoading">绑定</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!--登录、手机验证码登录、注册、扫码登录-->
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
const emit = defineEmits(['cancelLogin', 'editSubmit'])
import { sendSms, bindMobile } from '@/api/api'
const bindingLoading = ref(false)
const timer = ref()
const props = defineProps({
  dialogTableVisible: {
    type: Boolean,
    default: false
  },
})
// 验证码计时器
const sms = ref({
  disabled: false,
  total: 60,
  count: 0
})
const submitData = ref({
  mobile: '',
  type: 'bind',
  code: ''
})
// 计时器处理器
const timerHandler = () => {
  sms.value.count = sms.value.total
  sms.value.disabled = true
  timer.value = setInterval(() => {
    if (sms.value.count > 1 && sms.value.count <= sms.value.total) {
      sms.value.count--
    } else {
      sms.value.disabled = false
      clearInterval(timer.value)
    }
  }, 1000)
}
// 验证手机号
// 获取验证码
const getCode = (code:string) => {
  if (!submitData.value.mobile) {
    ElMessage.warning('请输入您的手机号码')
    return false
  }
  const rel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  if (!rel.test(submitData.value.mobile)) {
    ElMessage.warning('请输入正确的手机号码')
    return false
  }
  sendSms({
    mobile: submitData.value.mobile,
    scene: code
  }).then((res:any) => {
    if (res.code === 200) {
      timerHandler()
      ElMessage.success('短信发送成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const cancel = () => {
  emit('cancelLogin')
}
// 清空表单
const emptyForm = () => {
  submitData.value.code = ''
  submitData.value.mobile = ''
  sms.value.count = 0
  sms.value.total = 60
  sms.value.disabled = false
  clearInterval(timer.value)
}
const bindingFun = (type:string) => {
  if (!submitData.value.mobile) {
    ElMessage.warning('请输入您的手机号码')
    return false
  }
  const rel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  if (!rel.test(submitData.value.mobile)) {
    ElMessage.warning('请输入正确的手机号码')
    return false
  }
  if (!submitData.value.code) {
    ElMessage.warning('请输入验证码')
    return false
  }
  bindingLoading.value = true
  bindMobile(submitData.value).then((res:any) =>{
    bindingLoading.value = false
    if (res.code === 200) {
      ElMessage.success('绑定成功')
      cancel()
      emptyForm()
    } else {
      ElMessage.error(res.msg)
    }
  }).catch((err:any) => {
    console.log(err)
    bindingLoading.value = false
  })
}
</script>
<style scoped>
.leading-10{
  line-height: 2.5rem;
  padding-left: 15px;
  padding-right: 15px;
  background: #edefff;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  display: flex;
  margin-bottom: -15px;
  margin-top: 30px;
  margin-left: -40px;
  margin-right: -40px;
  color: #999;
}
.leading-10 span{
  cursor: pointer;
  color: #333;
}
.alert{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  top: 0;
  left: 0;
  z-index: 998;
}
.loginCon{
  width: 94%;
  background: #fff;
  position: fixed;
  z-index: 999;
  border-radius: 6px;
  top: 50%;
  left: 50%;
  padding: 15px 20px;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
}
.login-title{
  font-size: 24px;
  color: #333;
  display: flex;
  align-items: center;
}
.returnLogin{
  font-size: 14px;
  margin-left: auto;
  cursor: pointer;
  outline: none;
  color: #409eff;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.formCon{
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.closeCss{
  text-align: right;
  font-size: 20px;
  margin: .5rem 0 1rem 0;
}
.closeCssOne{
  cursor: pointer;
}
.closeCssOne:hover{
  color: #409eff;
}
.phonelogin{
  color: #409eff;
  cursor: pointer;
}
.borderThree{
  border-top: 1px solid #dcdfe6;
  display: flex;
  height: 1px;
  margin: 24px 0;
  width: 100%;
  position: relative;
  margin-top: 40px;
}
.borderThree span{
  position: absolute;
  left: 50%;
  transform: translate(-50%) translateY(-50%);
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px;
  background-color: #fff;
  color: #999;
}
.wx-login{
  text-align: center;
}
.wx-login img{
  cursor: pointer;
  outline: none;
}
@media (min-width: 750px) {
  .loginCon {
    max-width:400px;
  }
}
</style>